let product_v = new Vue({
    el: ".grid",
    data: {
        arr: []
    },
    created: function () {
        //获取地址中的参数 检查是否包含cid,包含代表请求的是某个分类下的作品
        if (location.search.indexOf("cid") != -1) {//请求分类下的作品
            //得到请求的分类id
            let cid=location.search.split("=")[1]
            //请求某个分类下的作品
            axios.get("/product/selectByCid?cid="+cid).then(function (response) {
                product_v.arr = response.data;
            })
        } else if (location.search.indexOf("wd")!=-1) {//包含代表时点击了搜索
            let  wd=location.search.split("=")[1]
            axios.get("/product/search?wd="+wd).then(function(response){
                product_v.arr=response.data
            })
        }else {//请求所有作品
                axios.get("/product/select/home").then(function (response) {
                    product_v.arr = response.data;
                })
        }
    },//当vue管理的变量发生改变时updated方法会触发
    updated: function () {
        //当arr数组得到请求回来的数据的时候 执行初始化瀑布流
        $(".grid").imagesLoaded().progress(function () {
            $(".grid").masonry({
                itemSelector: ".grid-item",
                columnWidth: 210
            })
            //给瀑布流中的元素添加鼠标移入移除事件
            $(".grid-item").hover(function () {//鼠标移入时执行的方法
                //$(this)得到触发事件的元素div
                //.children("div")获取div类型的子元素(蓝条)
                $(this).children("div").fadeIn(500);
            }, function () {//鼠标移除时执行的方法
                $(this).children("div").fadeOut(500);
            });
        })
    }
})